<template>
  <div class="aside-bar">
    <el-menu
        :default-active="currentPath"
        router
        mode="vertical"
        background-color="white"
        text-color="#222"
        active-text-color="red"
        style="min-width: 200px">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'BottleAside',
  data () {
    return {
      navList: [
        {name: '/bottle/ThrowBottle', navItem: '扔瓶子'},
        {name: '/bottle/GetBottle', navItem: '捞瓶子'},
        {name: '/bottle/MyBottle', navItem: '我的瓶子'},
      ],
      keywords: ''
    }
  },
  computed: {
    hoverBackground () {
      return '#ffd04b'
    },
    currentPath () {
      var x = this.$route.path.indexOf('/', 1)
      if (x !== -1) {
        return this.$route.path.substring(0, x)
      } else {
        return this.$route.path
      }
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}

span {
  pointer-events: none;
}
.aside-bar {
  position: fixed;
  top: 65px;
  left: 0;
  width: 10%;
}
</style>
